<template>
	<view class="knowledge">
		<u-navbar :custom-back="goback">
			<view class="slot-wrap">
				<u-search
					placeholder="搜索问题"
					v-model="searchipt"
					:height="50"
					:input-style="{
						height: '50rpx'
					}"
					:action-style="{
						width: '118rpx',
						height: '50rpx',
						lineHeight: '50rpx',
						backgroundColor: searchipt == '' ? '#DFDFDF' : '#FFDB28',
						borderRadius: '60rpx',
						color: '#ffffff'
					}"
					@search="doSearch"
					@custom="doSearch"
				></u-search>
			</view>
		</u-navbar>
		<u-subsection v-if="issubshow" :current="type" :list="list" bgColor="#F4F4F4" @change="subchange" active-color="black" button-color="#F4F4F4"></u-subsection>
		<view class="problem_box" v-if="problemList.length > 0">
			<block v-for="(v, i) in problemList" :key="i">
				<view class="problemli">
					<view class="title u-line-1" @click="goanswer(v)">{{ v.q }}</view>
					<view class="bot">
						<view class="bot-left" @click="goanswer(v)">
							<text class="u-p-r-20">{{ v.q_user }}</text>
							<text class="u-p-r-20">浏览{{ v.view_num }}</text>
							<text class="u-p-r-20">回答{{ v.a_num }}</text>
						</view>
						<view class="bot_right" @click="goanswer(v)">{{ v.q_time }}</view>
					</view>
				</view>
			</block>
			<u-loadmore :status="status":margin-top="40"  :margin-bottom="40"/>
		</view>
		<u-empty v-else text="Sorry,暂无数据" mode="data" :margin-top="40"></u-empty>
		<u-back-top :scroll-top="scrollTop" :top="600"></u-back-top>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	name: 'knowledge',
	data() {
		return {
			page: 1,
			scrollTop: 0,
			status: 'loadmore',
			issubshow: true,
			searchipt: '',
			list: [
				{
					name: '所有问题'
				},
				{
					name: '我提问的'
				},
				{
					name: '我回答的'
				}
			],
			problemList: [
				// {
				// 	a_num: 3//回答数
				// 	id: 346
				// 	q: "测试问题"
				// 	q_time: "2020-09-21 09:49:29"
				// 	q_user: "付全恩"
				// 	view_num: 0//浏览量
				// }
			],
			type: 0
		};
	},
	watch: {
		searchipt: function(val) {
			if (val == '') {
				this.issubshow = true;
				this.getproblemList(1, 10, this.type + 1, this.searchipt);
			}
		}
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onReachBottom() {
		this.status = 'loading';
		this.page = ++this.page;
		this.getproblemList(this.page, 10, this.type + 1, this.searchipt);
	},
	//实例创建完成后被立即调用
	created() {},
	onLoad(option) {},
	//挂载开始之前被调用
	beforeMount() {},
	onPullDownRefresh() {
		//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次

		this.getproblemList(1, 10, 1);
		setTimeout(()=> {
			this.$refs.uToast.show({
				title: '刷新成功!',
				type: 'success'
			});
			uni.stopPullDownRefresh(); //停止下拉刷新动画
		}, 1000);
	},
	//初次渲染完成
	onReady() {
		this.getproblemList(1, 10, 1);
	},
	//全局只触发一次
	onLaunch() {},
	//从后台进入前台
	onShow() {},
	//前台进入后台
	onHide() {},
	methods: {
		getproblemList(page, pagesize, type, search) {
			this.$u.api
				.getproblemList({
					page: page,
					pagesize: pagesize,
					type: type, //1=所有问题/2=我提问的/3=我回答的
					search: search==undefined?"":search
					// sort:1,//1=提问时间，2=浏览数，3=回答数
				})
				.then(res => {
					// console.log(res);
					this.page=res.data.page;
					this.problemList.push(...res.data.data);
					if (this.page >= res.data.max_page) this.status = 'nomore';
					else this.status = 'loading';
				})
				.catch(err => {
					console.log(err);
				});
		},
		goanswer(val) {
			// console.log(val)
			uni.navigateTo({
				url: '/pages/knowledge/answer?problem=' + encodeURIComponent(JSON.stringify(val))
			});
		},
		subchange(index) {
			// console.log(index);
			this.type = index;
			this.problemList=[];
			this.getproblemList(1, 10, index + 1);
		},
		goback() {
			uni.navigateBack({
				delta: 1,
				animationType: 'pop-out',
				animationDuration: 200
			});
		},
		doSearch() {
			// console.log(this.searchipt);
			if (this.searchipt == '') {
				return;
			} else {
				this.issubshow = false;
				this.getproblemList(1, 10, this.type + 1, this.searchipt);
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.knowledge {
	background-color: $lt-bg;
	min-height: 100vh;
	.slot-wrap::v-deep {
		display: flex;
		align-items: center;
		flex: 1;
		padding-right: 20rpx;
	}
	.problem_box {
		background-color: #ffffff;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		overflow: hidden;
		.problemli {
			width: 700rpx;
			margin: 0 auto;
			padding-top: 36rpx;
			border-bottom: 2rpx solid #bbbbbb;
			.title {
				font-size: 32rpx;
				color: #000000;
				font-weight: 600;
			}
			.bot {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 28rpx auto;
				color: #787882;
			}
		}
	}
}
</style>
